{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>评论详情</title>
<style type="text/css">
    .mui-content{ padding-bottom: 50px;}
    .mui-control-content {
        background-color: #efeff4;
        height: 100%;
    }
    .mui-table-view .mui-media-body{ overflow: visible;}
    .mui-scroll-wrapper,.mui-scroll{ position: relative !important;}
    .mui-segmented-control{ border-radius: 30px;}
    .mui-segmented-control .mui-control-item{ line-height: 40px;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <div class="mb-comment">
        <!--评论详情-->
        <div class="mb-comment-zt mb-comment-lists">
            <div class="mb-comment-list">
                <div class="mb-comment-nick mui-clearfix">
                    <img class="mb-userphoto mui-pull-left" src="{{ctx.app.config.api.image}}/{{data1.headImgUrl}}"/>
                    <div class="mb-nick-name mui-pull-left">
                        <b class="mb-nickname mui-ellipsis" data-id="{{data1.commentPersonId}}">{{data1.commentPersonName}}</b>
                        <p class="mb-arr-time">{{data1.createDate}}</p>
                    </div>
                </div>
                <div class="mb-comment-cont">
                    {{data1.content}}
                </div>
            </div>
        </div>

        <!--回复评论详情列表-->
        <div class="mb-comment-li mb-comment-lists">
            <h4 class="mb-comment-all">全部{{review.totalCount}}条评论</h4>
            {% for item in review.list %}
            <div class="mb-comment-list xw-border-bottom">
                <div class="mb-comment-nick mui-clearfix">
                    <img class="mb-userphoto mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.reviewheadImg}}"/>
                    <div class="mb-nick-name mui-pull-left">
                        <b class="mb-nickname mui-ellipsis">{{item.reviewNickName}}</b>
                        <p class="mb-arr-time">{{item.createDate}}</p>
                    </div>
                </div>
                <div class="mb-comment-cont">
                    <a href="javascript:void(0);" onclick="js_button(this)" data-id="{{item.id}}" data-cid="{{item.reviewPersonId}}" data-reviewid="{{item.reviewId}}" data-name="{{item.reviewNickName}}">{{item.content}}</a>
                    {% if item.secondDTO.length != 0 %}
                    {%for item2 in item.secondDTO%}
                    <span class="mb-replay-more"><b style="color:skyblue">{{item2.reviewNickName}}</b><b> : </b><b style="color:#abaaaa">{{item2.content}}</b></span>
                    {%endfor%}
                    {%endif%}
                </div>
            </div>
            {% endfor %}
            </h4>
        </div>
    </div>

    <!--回复、分享按钮-->
    <nav class="mui-bar mui-bar-tab mb-bar-tab xw-border-top" id="mb-bar-tab">
        <input type="text" id="replay-input" class="mb-replay-btn mb-replay-btn1" placeholder="请输入回复内容">
        <div class="mb-btn-submit mb-btn-submit1">
            <input type="submit" name="submit"  value="提交" />
        </div>
        <i class="iconfont icon-sousuo"></i>
    </nav>

{% endblock %}

{#js代码#}
{% block js %}
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#replay-input").focus(function(){
            var parent = $(this).parent();
            parent.addClass("mui-active");
        });
        $("#replay-input").blur(function(){
            var parent = $(this).parent();
            parent.removeClass("mui-active");
        });
    });


    mui(".mb-btn-submit").on('tap','input[type="submit"]',function(){
        var id = location.search.substr(4);
        var cid = $(".mb-nickname,mui-ellipsis").attr('data-id');
        var cont = $('#replay-input').val();
        mui.post('/onereviewsend', {
            commentId: id,
            content:cont,
            sign:1,
            reviewId:'',
            },function(data){
                if(data.code!=200){
                    mui.toast('评论失败');
                }else{
                    mui.toast('评论成功');
                    window.location.reload();
                }
            },'json'
        );
    });

    function js_button(e){
        var id = $(e).context['dataset']['id'];
        var rid = $(e).context['dataset']['reviewid'];
        var msg = '对'+$(e).context['dataset']['name']+'说...';
        mui.prompt('请填写回评',msg,'回评',['关闭','回评'],function(e){
            if(e.index==1){
                mui.post('/onereviewsend', {
                        commentId:id,
                        content:e.value,
                        sign:2,
                        reviewId:rid,
                    },function(data){
                        if(data.code!=200){
                            mui.toast('评论失败');
                        }else{
                            mui.toast('回评成功');
                            window.location.reload();
                        }
                    },'json'
                );
            }else{
                console.log('回评结束');
            }
        })
    }
</script>

    <script>
        var page = 2, //分页码
             comturl = location.search.substr(4);//获取当前文章ID
        timers = 1000;
        onoff = true;
        var imgUrl = 'http://img-test.zzyuu.com/';
        // 加载数据
        var LoadingData = function() {
            mui.get('/commentlist',{
                    objectId:comturl,
                    objectType:4,
                    pageNo:page
                },function(data){
                    if(data.code!=200){
                        console.log('获取评论失败');
                        mui.toast(data.message);
                    }else {
                        if (page == data.data['totalPage']) {
                            onoff = false;
                            return mui.toast('没有更多评论.....');
                        }
                        console.log(data);
                        var commentdata = data.data['list'];
                        console.log(commentdata);
                        //评论盒子内容开始
                        var box = '';
                        var commentdiv1 = '<div class="mb-comment-list xw-border-bottom">';
                        var commentdiv2 = '<div class="mb-comment-nick mui-clearfix">';
                        var commentimg = '<img class="mb-userphoto mui-pull-left" src="';
                        var commentdiv3 = '<div class="mb-nick-name mui-pull-left">';
                        var commentb = '<b class="mb-nickname mui-ellipsis">';
                        var commentp = '<p class="mb-arr-time">';
                        var commentdiv4 = '<div class="mb-comment-cont">';
                        var commenta = '<a class="mb-replay-more" style="color:#bbb9b9;" ';
                        var commenta2 = '<a href="javascript:void(0);" onclick="js_button(this)" ';

                        for (var i = 0; i < commentdata.length; i++) {
                            if (commentdata[i]['reviewCount'] != 0) {
                                box += commentdiv1 + commentdiv2 + commentimg + imgUrl + commentdata[i]['headImgUrl']
                                    + '"/>' + commentdiv3 + commentb + commentdata[i]['commentPersonName'] + '</b>'
                                    + commentp + commentdata[i]['createDate'] + '</p></div></div>'
                                    + commentdiv4 + commenta2 + 'data-id=' + commentdata[i]['id'] + ' data-name=' + commentdata[i]['commentPersonName']
                                    + ' data-cid=' + commentdata[i]['commentPersonId'] + '>'
                                    +commentdata[i]['content'] + '</a>' + commenta + 'href="replaylist?id='+commentdata[i]['id']
                                    + '"> 查看' + commentdata[i]['reviewCount'] + '条回复'
                                    + '</a></div></div>';
                            } else {
                                box += commentdiv1 + commentdiv2 + commentimg + imgUrl + commentdata[i]['headImgUrl']
                                    + '"/>' + commentdiv3 + commentb + commentdata[i]['commentPersonName'] + '</b>'
                                    + commentp + commentdata[i]['createDate'] + '</p></div></div>'
                                    + commentdiv4 + commenta2 + 'data-id=' + commentdata[i]['id'] + ' data-name=' + commentdata[i]['commentPersonName']
                                    + ' data-cid=' + commentdata[i]['commentPersonId'] + '>'
                                    +commentdata[i]['content']+'</a></div></div>';
                            }
                            //创建盒子
                        }
                        var commentbox = $('#list_box');
                        commentbox.append(box);
                    }
                },'json'
            );
        };

        $(document).scroll(function() {
            //console.log($(document).scrollTop());

            if($(document).scrollTop()>=$(document).height()-$(window).height()-150){
                if(onoff) {
                    clearTimeout(timers);
                    timers = setTimeout(function () {
                        LoadingData();
                        page++;
                    }, 300);
                }
            }
        });
    </script>



<!--flotdemo-->
{% endblock %}